<template>
  <div class="home">
    <header></header>
    <div class="content">
      <div class="leftBar">
        <ul>
          <li @click="click('one')">1</li>
          <li @click="click('two')">2</li>
          <li @click="click('three')">3</li>
          <li @click="click('four')">4</li>
        </ul>
      </div>
      <div class="rightBox">
      <ul>
        <li @click="handleDelete(tab)" v-for="tab in cachedTab" :key="tab">{{tab}}</li>
      </ul>
      {{cachedTab2}}
        <keep-alive :include="['Detail'].concat(cachedTab)">
          <router-view :key="getFullPath()"></router-view>
        </keep-alive>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import { mapState } from 'vuex'
export default {
  name: 'Home',
  components: {
  },
  watch: {
    $route() {
      this.$store.dispatch('cachedTab/addTab', this.$route.params.path)
    }
  },
  computed: {
    ...mapState({
      cachedTab: state => state.tab.cachedTab,
      cachedTab2: state => state.cachedTab.tab
    }),
    key() {
      const result = this.cachedTab2.find(tab => tab.name === this.$route.params.path) || {};
      return result['key'] || 0
    }
  },
  methods: {
    click(ev) {
      this.$router.push({name: 'Detail', params: {path: ev}})
      this.$store.dispatch('tab/addCachedTab', ev)
    },
    getFullPath() {
      return this.$route.fullPath + this.key
    },
    handleDelete(tab) {
      this.$store.dispatch('cachedTab/delTab', tab)
      this.$store.dispatch('tab/deleteCachedTab', tab)
    }
  },
}
</script>
<style>
.home {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
header {
  height: 80px;
  background: #ccc;
}
.content {
  display: flex;
  height: calc(100% - 80px);
}
.leftBar {
  flex: 0 0 300px;
  margin-right: 10px;
}
.rightBox {
  flex-grow: 1;
}

</style>
